<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@3.2.0"></script>
	</head>

	<body>
		<!-- 199010127 吴金昔 -->
		<div id="shopcart" class="shop-cart">
			<div class="tabs">
				<div class="border" @mouseenter="topAnimation()">
					<!-- data-*表示自定义属性。 -->
					<div class="title active" data-index="0">
						全部商品
						<span class="count">3</span>
					</div>
					<div class="title" data-index="1">
						降价商品
						<span class="count">0</span>
					</div>
					<div class="title last" data-index="2">
						库存紧张
						<span class="count">0</span>
					</div>
					<div class="line"></div>
				</div>
			</div>

			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<li>
							<input type="checkbox" 
							class="select-all"
							v-model="checkeAll" 
							@change="change_isChecked">
							<label>全选</label>
						</li>
						<li class="product-info">商品信息</li>
						<li>单价</li>
						<li>数量</li>
						<li>金额</li>
						<li>操作</li>
					</ul>
				</div>
				
				<div id="shoplist" class="shoplist">
					<!-- 店铺内容及样式参考 -->

					<!-- 遍历店铺数据 -->
					<ul v-for="(shop,index) in shops">
						<li class="shop" >
							<div class="shop-info">
								<!-- 动态绑定店铺栏选中状态 -->
								<input type="checkbox" 
								v-model="shop.isChecked"
								@change="checked_one(shop.shopId)" >
								<span class="shop-tip">店铺：</span>
								<!-- 遍历店铺名称 -->
								<a class="shop-name" href="#">{{shop.shopName}}</a>
								<a href="#" class="wangwang">旺旺</a>
							</div>
							<div class="products">
								<!-- 遍历店铺商品数据 -->
								<div class="item" v-for="(p,p_index) in shop.products">
									<div class="select-logo">
										<!-- 动态绑定商品栏选中状态 -->
										<input type="checkbox" 
										v-model="p.isChecked"
										@change="checke_product()" 
										>
										<img :src="p.topImg" alt="产品logo">
									</div>
									<div class="product-detail">
										<div class="left">
											<!-- 商品名称 -->
											<a href="#" class="product-name">
												{{p.productName}}
											</a>
											<div class="logos">
												<a href="#" class="card">信用卡</a>
												<a href="#" class="service">保障服务</a>
												<a href="#" class="order">订单险</a>
												<a href="#" class="seven">7天无理由</a>
											</div>
										</div>
										<div class="right" v-html="p.spec">
											
										</div>
									</div>
									<!-- 遍历商品价格（折前折后） -->
									<div class="price">
										<p class="market-price">￥{{p.marketPrice}}</p>
										<p class="real-price">￥{{p.price}}</p>
									</div>
									<div class="count">
										<span class="sub" @click="(p.count>0)?p.count--:p.count">-</span>
										<span class="input"><input type="text" :value="p.count" id="add_delete"></span>
										<span class="add" @click="p.count++">+</span>
									</div>
									<!-- 计算每家店铺的商品价格 -->
									<div class="amount">￥{{(p.price*p.count).toFixed(2)}}</div>
									<div class="delete">
										<a href="#" @click="deleteOne(index,p_index)">删除</a>
									</div>
								</div>
							</div>
						</li>
					</ul>	
				</div>
			</div>

			<div class="operate">
				<div class="left">
					<input type="checkbox" 
					class="select-all-footer" 
					v-model="checkeAll"
					@change="change_isChecked">
					<a href="javascript:void(0);" 
					@click="deleteAll">
						删除
					</a>
				</div>

				<div class="right">
					<!-- 计算所有商品数量 -->
					<div>已选择商品<span class="selected-count">{{totalCount}}</span>件</div>
					<!-- 计算所有商品价格总和 -->
					<div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
					<a href="javascript:void(0);" class="settle">结算</a>
				</div>
			</div>
		</div>
		<script>
			// 创建应用实例
			Vue.createApp({
				data() {
					return {
						shops: shopcarts,
						checkeAll:false,
					};
				},
				methods:{
					// 实现头部的动画
					topAnimation() {
						var titles = document.querySelectorAll('.title')
						var line = document.querySelector('.line')
						for (let i = 0; i < titles.length; i++) {
							titles[i].addEventListener('mouseenter', function () {
								for (var j = 0; j < titles.length; j++) {
									titles[j].classList.remove('active')
								}
								this.classList.add('active')
								line.style.left = i * line.offsetWidth + 'px'
							})
						}
					},
					
					// 设置全选
					// 全选
					changeChecked_true(){
						this.shops.forEach((item) => {
							item.isChecked = true
							item.products.forEach((val) => {
								val.isChecked = true
							})
						})
					},
					// 取消全选
					changeChecked_false(){
						this.shops.forEach((item) => {
							item.isChecked = false
							item.products.forEach((val) => {
								val.isChecked = false
							})
						})
					},
					// 控制全选
					change_isChecked(){
						if(this.checkeAll==true){
							this.changeChecked_true()
						}
						else{
							this.changeChecked_false()
						}
					},

					// 设置单选商铺
					checked_one(index){
						// 选中为true，未选中为false
						this.shops.isChecked = this.shops.isChecked;
						// 用map映射 把check状态放在新数组
						let result = this.shops.map((item) =>{
							return item.isChecked
						})
						// console.log(result,'新数组');

						// 利用every方法，判断新数组是否都是true，都是true就返回true，都是false就返回false;
						let bool = result.every((item) =>{
							// console.log(item,'every')
							return item == true
						})
						// console.log(bool,'bool')

						if(bool){
							this.checkeAll = true
						}
						else{
							this.checkeAll = false
						}

						// 全选商品
						let shop = this.shops.filter((item) => {
							if(index == item.shopId){
								return item;
							}
						});
						if(shop[0].isChecked){
							// 全选当前店铺的所有商品
							shop.forEach((item) => {
							item.products.forEach((val) => {
								val.isChecked = true
							})
						})
						}
						else{
							// 取消全选当前店铺的所有商品
							shop.forEach((item) => {							
							item.products.forEach((val) => {
							val.isChecked = false
							})
						})
						}
					},
					
					// 设置单选商品
					checke_product(){
						let needResult = this.shops.map((item) => {
							let result = item.products.map((item) => {
								return item.isChecked == true
							})
							console.log(result,'新数组')
							let bool = result.every((item) => {
								// console.log(item,'every')
								return item == true
							})
							item.isChecked = bool;
							console.log(item.isChecked)
							console.log(bool,'勾选状态')
							return bool;
						})
						// console.log(needResult)
						let needBool = needResult.every((item) => {
							// console.log(item,'every')
							return item == true
						})
						if (needBool) {
							this.checkeAll = true
							
						}
						else{
							this.checkeAll = false
						}
					},

					// 删除商品
					deleteAll() {
						if (this.checkeAll) {
							alert("确定不买点啥？")
							this.shops.splice(0, 3);
							this.checkeAll = !this.checkeAll;
						}
						else {
							this.shops.forEach((item, index1) => {
								//判断店铺是否勾选
								if (item.isChecked) {
									this.shops.splice(index1, 1)
								}
								else {
									item.products.forEach((item,index2)=>{
										if (item.isChecked) {
											this.shops[index1].products.splice(index2, 1);
										}
									})
								}
							});
						}
					},
					

					// 删除单个商品
					deleteOne(index1,index2){
						this.shops[index1].products.splice(index2,1);
						if(this.shops[index1].products.length == 0){
							console.log("你好")
							this.shops.splice(index1,1)
						}
					}
				},
				
				computed: {
					// 计算商品总价
					totalPrice: function () {
						let totalPrice = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalPrice += val.count * val.price
								}
							})
						})
						return totalPrice.toFixed(2);
					},
					// 计算商品总数
					totalCount: function () {
						let totalCount = 0;
						this.shops.forEach((item) => {
							item.products.forEach(val => {
								if(val.isChecked){
									totalCount += val.count;
								}
							})
						})
						return totalCount;
					}
				}
			}).mount("#shopcart");
		</script>
	</body>

</html>
